<template>
	<view class="wrapper" :style="{paddingBottom:step == 1 ? '100rpx' : '300rpx'}">
		<view class="step1" v-if="step == 1">
			<view class="title">检测详情</view>
			<view class="test_form">
				<view class="form_item">
					<view class="label">
						<view style="color: red;margin-right: 10rpx;">*</view> 委托方
					</view>
					<view class="content">
						<u--input v-model="formData.client" placeholder="请输入委托方" fontSize="14" inputAlign="right"
							border="none" disabled style="background-color: #fff;"></u--input>
					</view>
				</view>
				<view class="form_item">
					<view class="label">
						<view style="color: red;margin-right: 10rpx;">*</view>型号
					</view>
					<view class="content">
						<u--input v-model="formData.model" placeholder="请输入型号" fontSize="14" inputAlign="right"
							border="none" clearable></u--input>
					</view>
				</view>
				<view class="form_item">
					<view class="label">品牌</view>
					<view class="content">
						<u--input v-model="formData.brandName" placeholder="请输入品牌" fontSize="14" inputAlign="right"
							border="none" clearable></u--input>
					</view>
				</view>
				<view class="form_item">
					<view class="label">供应商</view>
					<view class="content">
						<u--input v-model="formData.supplier" placeholder="请输入供应商" fontSize="14" inputAlign="right"
							border="none" clearable></u--input>
					</view>
				</view>
				<view class="form_item">
					<view class="label">批次</view>
					<view class="content">
						<u--input v-model="formData.batch" placeholder="请输入批次" fontSize="14" inputAlign="right"
							border="none" clearable></u--input>
					</view>
				</view>
				<view class="form_item">
					<view class="label">产地</view>
					<view class="content">
						<u--input v-model="formData.production" placeholder="请输入产地" fontSize="14" inputAlign="right"
							border="none" clearable></u--input>
					</view>
				</view>
				<view class="form_item">
					<view class="label">
						<view style="color: red;margin-right: 10rpx;">*</view>送检数量
					</view>
					<view class="content">
						<u--input v-model="formData.sCount" placeholder="请输入数量" fontSize="14" inputAlign="right"
							border="none" @change="numberType" clearable></u--input>
					</view>
				</view>
				<view class="form_item" v-if="role.id == 1 || role.id == 2">
					<view class="label">
						<view style="color: red;margin-right: 10rpx;">*</view>采购单号
					</view>
					<view class="content">
						<u--input v-model="formData.purchaseOrderNo" placeholder="请输入采购单号" fontSize="14"
							inputAlign="right" border="none" clearable></u--input>
					</view>
				</view>
				<view class="form_item">
					<view class="label">检测报告</view>
					<view class="content">
						<u-checkbox-group v-model="reportTypeValue" shape="square" @change="checkboxChange">
							<u-checkbox v-for="(item,index) in reportType" :key="index" :name="item.id"
								:label="item.name + '('+ '￥'+item.price+')'" labelSize="24rpx" iconSize="20"
								:customStyle="{marginRight: '8px'}">
							</u-checkbox>
						</u-checkbox-group>
					</view>
				</view>
				<view class="form_item">
					<view class="label">是否加急</view>
					<view class="content">
						<u-radio-group v-model="urgent" @change="urgentChange">
							<u-radio :label="'是(' + '￥'+ urgentType[0].price + ')'" :name="true" labelSize="24rpx"
								iconSize="20">
							</u-radio>
							<u-radio :customStyle="{marginLeft: '8px'}" label="否" :name="false" labelSize="24rpx"
								iconSize="20">
							</u-radio>
						</u-radio-group>
					</view>
				</view>
				<view class="form_item">
					<view class="label">备注</view>
					<view class="content">
						<u--input v-model="formData.remark" placeholder="请输入备注" fontSize="14" inputAlign="right"
							border="none" clearable></u--input>
					</view>
				</view>
				<view class="mailType">
					<view style="font-weight: bold;font-size: 36rpx;margin: 20rpx 0;">寄件方式</view>
					<u-radio-group v-model="formData.addressType" wrap="true" placement="column" size="22">
						<view class="box" v-for="(item,index) in mailType" :key="index" @click="openClick(index)">
							<view>
								<view>{{item.name}}</view>
								<view style="font-size: 20rpx;margin-top: 10rpx;">{{item.text}}</view>
							</view>
							<view>
								<u-radio :name="item.id" @change="openClick(index)" iconSize="22"></u-radio>
							</view>
						</view>
					</u-radio-group>
				</view>
				<view class="bottom_item">
					<view style="width: 100%; font-size: 24rpx;margin: 40rpx 0; ">
						<u-radio-group v-model="readValue" size="20">
							<u-radio :name="1" shape="square" iconSize="22">
								<span style="color: #AEAEAE;">阅读并同意</span>
								<span style='font-weight: 700;' @click="openClick(8)">《鹏城测试服务协议》</span>
							</u-radio>
						</u-radio-group>
					</view>
				</view>
				<view class="bottom_item">
					<button @click="nextStep()" v-if="urgent"
						style="width: 100%; color: #fff;background-color: #3953b8;">下一步</button>
					<button @click="nextStep()" v-else
						style="width: 100%; color: #fff;background-color: #3953b8;">选择时间</button>
				</view>
			</view>
		</view>

		<!-- 消息提示 -->
		<u-toast ref="uToast"></u-toast>

		<!-- 第二步 -->
		<view class="step2" v-if="step == 2">
			<view class="title">
				<view class="line"></view>
				<view>检测项目</view>
			</view>
			<view class="project_container">
				<view class="pro_item" v-for="(item,index) in checkList" :key="item.name">
					<view class="item_check">
						<u-checkbox-group v-model="item.active" @change="changeCheck(item)" size="20">
							<u-checkbox shape="circle" name="true" iconSize="20"></u-checkbox>
						</u-checkbox-group>
					</view>
					<view class="item_detail">
						<view class="item_label">
							<view class="item_name">{{item.name}}</view>
							<view class="item_amount">
								<button class="decrease" :disabled="item.active.length<=0" @click="decreaseNum(item)">
									<u-icon name="minus" :color="item.active.length > 0 ? '#3B3B3B' : '#C4C4C4'"
										size="18" bold></u-icon>
								</button>
								<view class="amount">
									<u--input v-model="item.amount" fontSize="18" inputAlign="center"
										:disabled="item.active.length<=0" border="none" @blur="checkInput(item,index)"
										:color="item.active.length > 0 ? '#3B3B3B' : '#C4C4C4'"></u--input>
								</view>
								<button class="add" :disabled="item.active.length<=0" @click="addNum(item)">
									<u-icon name="plus" :color="item.active.length > 0 ? '#3B3B3B' : '#C4C4C4'"
										size="18" bold></u-icon>
								</button>
							</view>
						</view>
						<view class="item_price">
							<text>￥{{item.price}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 按钮 -->
		<view class="step_btn" v-if="step == 2">
			<view class="step2_box">
				<!-- 选择优惠券 -->
				<view class="coupon_container" @click="toDiscount()">
					<view style="display: flex;align-items: center;">
						<text>优惠券选择</text>
						<image style="width: 42rpx;padding-left: 14rpx;" src="http://applet.atptest.com/23042306.png"
							mode="widthFix"></image>
					</view>
					<view v-if="couponType != -1" style="font-size: 24rpx;margin-left: 40rpx;">
						<text style="background-color: #3E56BA;color: #fff;border-radius: 10rpx;padding: 2rpx 16rpx;"
							v-if="couponType == 0">满减券 x 1</text>
						<text style="background-color: #fcc524;color: #fff;border-radius: 10rpx;padding: 2rpx 16rpx;"
							v-if="couponType == 1">现金券 x 1</text>
						<text style="background-color: #1ed76d;color: #fff;border-radius: 10rpx;padding: 2rpx 16rpx;"
							v-if="couponType == 2">免费券 x 1</text>
					</view>
					<view style="display: flex;font-size: 24rpx;margin-left: 40rpx;">
						<view style="color: #BB645A;margin-right: 20rpx;" v-if="discounts">-￥{{discounts}}</view>
						<view style="color: #BB645A;margin-right: 20rpx;" v-if="couponList.length <= 0">您暂无可用的优惠券</view>
						<view style="color: #BB645A;margin-right: 20rpx;"
							v-if="couponList.length > 0 && formData.couponsIds.length <= 0">
							您有{{couponList.length}}张优惠券可供使用</view>
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>

				<view style="width: 100%;display: flex;justify-content: space-between; align-items: center;">
					<button @click="stepHandle(2)"
						style="width: 45%; color: #3e56ba;background-color: #fff;border: 1px solid rgb(62, 86, 186);">上一步</button>
					<button @click="confirm()" :disabled="btnDisabled"
						style="width: 45%; color: #fff;background-color: #3953b8;flex-wrap: nowrap !important;">
						<text>提交</text>
						<text style="font-size: 28rpx;">(</text>
						<text style="font-size: 28rpx;color: #e54d42;">￥{{formData.total}}</text>
						<text style="font-size: 28rpx;">)</text>
					</button>
				</view>
			</view>
		</view>

		<!-- 服务协议弹出层 -->
		<u-popup :show="show" :round="30" @close="close" customStyle="overflow-y: scroll;overscroll-behavior: none">
			<view style="padding: 30rpx;max-height:800rpx;">
				<image src="http://applet.atptest.com/lzc2023082801.jpg" mode="widthFix" style="width: 100%;"></image>
			</view>
		</u-popup>
		<u-popup :show="show1" :round="30" @close="close" customStyle="overflow-y: scroll;overscroll-behavior: none">
			<view style="padding: 30rpx;max-height:800rpx;">
				<image src="http://applet.atptest.com/lzc2023082802.jpg" mode="widthFix" style="width: 100%;"></image>
			</view>
		</u-popup>

		<!-- 跳转提示弹出层 -->
		<u-popup :show="disabledTo" :round="10" mode="center" @close="close">
			<view style="padding: 30rpx;">
				<text v-text="`此单为月结订单,${numTo}秒后自动跳转...`"></text>
			</view>
		</u-popup>

		<!-- 自行邮寄 -->
		<u-popup :show="showSelf" :round="30" @close="close(1)">
			<view class="popup">
				<view style="text-align: center;">自行邮寄</view>
				<view class="addressBox">
					<view class="card" style="border-bottom: 1px dashed #E9E9E9;">
						<view>
							<view class="top">寄</view>
						</view>
						<view class="address">
							<view><text class="name">鹏城测试ATP Lab</text><text class="phone">15914178852</text></view>
							<view class="addressR">广东省深圳市福田区振华路163号飞亚达大厦102-C室</view>
						</view>
						<view class="bottom" @click="copybtn()"><text style="color: #A80000;">复制</text>
						</view>
					</view>
					<view class="card">
						<view>
							<view class="top" style="background-color: #FD3B39;">回</view>
						</view>
						<view class="address" v-if="formData.regularAddress.name">
							<view><text class="name">{{formData.regularAddress.name}}</text><text
									class="phone">{{formData.regularAddress.phone}}</text></view>
							<view class="addressR">{{formData.regularAddress.address}}</view>
						</view>
						<view class="address" v-else style="display: flex;align-items: center;color: #576FD3;"
							@click="selectAddress()">点击新增回寄地址</view>
						<view class="bottom" @click="selectAddress()">
							<text>地址簿</text>
						</view>
					</view>
				</view>
				<view style="color: #A80000;font-size: 24rpx;margin-left: 10px;margin-top: 4px;">此地址为检测订单完成后，检测机构寄回件地址
				</view>

				<view class="addressBox">
					<view class="ticket_container">
						<view class="form_item">
							<view class="label">快递公司</view>
							<view class="item_input">
								<u--input placeholder="请填写" border="none" v-model="formData.expressCompany"
									inputAlign="right" fontSize="12"
									placeholder-style="text-align: right;color: rgb(167, 167, 167);font-size: 24rpx;">
								</u--input>
							</view>
						</view>
						<view class="form_item">
							<view class="label">运单号码</view>
							<view class="item_input">
								<u--input placeholder="请填写" border="none" v-model="formData.waybillNo"
									inputAlign="right" fontSize="12"
									placeholder-style="text-align: right;color: rgb(167, 167, 167);font-size: 24rpx;">
								</u--input>
							</view>
						</view>
					</view>
				</view>
				<button style="color: #fff;background-color: #3953b8;margin-top: 20rpx;" @click="close(1)">确认</button>
			</view>
		</u-popup>

		<!-- 到店检测 -->
		<u-popup :show="showArrive" :round="30" @close="close(2)">
			<view class="popup">
				<view style="text-align: center;">到店检测</view>
				<view class="addressBox">
					<view class="card">
						<view>
							<view class="top" style="background-color: #FD3B39;">回</view>
						</view>
						<view class="address" v-if="formData.regularAddress.name">
							<view>
								<text class="name">{{formData.regularAddress.name}}</text>
								<text class="phone">{{formData.regularAddress.phone}}</text>
							</view>
							<view class="addressR">{{formData.regularAddress.address}}</view>
						</view>
						<view class="address" v-else style="display: flex;align-items: center;color: #576FD3;"
							@click="selectAddress()">点击新增回寄地址
						</view>
						<view class="bottom" @click="selectAddress()">
							<text>地址簿</text>
						</view>
					</view>
				</view>
				<view style="color: #A80000;font-size: 24rpx;margin-left: 10px;margin-top: 4px;">此地址为检测订单完成后，检测机构寄回件地址
				</view>
				<button style="color: #fff;background-color: #3953b8;margin-top: 20rpx;" @click="close(2)">确认</button>
			</view>
		</u-popup>

		<!-- 优惠券弹框 -->
		<view style="background-color: #fff;" v-if="couponFlag">
			<Coupon :couponList="couponList" :couponFlag="couponFlag" :checkedIds="checkedIds"
				:totalPrice="formData.total" :reload="reload" @changeCoupon="changeCoupon"
				:couponTypeNumber="couponType" />
		</view>

		<!-- 预约时间 -->
		<u-popup :show="reserveTimeFlag" :round="20" @close="close(3)" @touchmove.stop.prevent="stopPenetrate"
			zIndex="99999">
			<u-toast ref="uToastReserveTime"></u-toast>
			<view class="time_popup">
				<view class="time_label">
					<text>送货时间</text>
					<view class="time_tip">若无号，可以选择是否加急进行订单插队处理</view>
				</view>
				<view class="period_container">
					<view class="period_left">
						<scroll-view class="time_period" scroll-y="true" :enhanced="true" :show-scrollbar="true">
							<!-- <view class="left_item" v-for="(item,index) in reserveTimeList" :key="item.value"
								@click="selectDate(item,index)"
								:style="{boxShadow: item.status == 1 ? (item.state != 1 ? '-1px 1px 4px 0px rgba(0, 0, 0, 0.25)' : '') : '',color: item.state == 1 ? '#C9C9C9':'#000'}">
								{{item.value.slice(5)}}
							</view> -->
							<view class="left_item" v-for="(item,index) in reserveTimeList" :key="item.value"
								@click="selectDate(item,index)"
								:style="{boxShadow: (item.status == 1 && item.state != 1) ? '-1px 1px 4px 0px rgba(0, 0, 0, 0.25)' : '',color: item.state == 1 ? '#C9C9C9':'#000'}">
								{{item.value.slice(5)}}
							</view>
						</scroll-view>
					</view>
					<view class="period_right">
						<scroll-view class="time_period" scroll-y="true" :enhanced="true" :show-scrollbar="true">
							<u-radio-group v-model="reservationID" placement="column">
								<view v-for="(item, index) in timePeriodList" :key="index" @click="timeHandle(item.id)">
									<view class="period_item">
										<u-radio :name="item.id" :disabled="item.state != 0" iconSize="18"></u-radio>
										<view class="period_item_label">
											<view>{{item.value}}</view>
											<view style="color: #7C8083;">{{ getStateValue(item.state)}}</view>
										</view>
									</view>
								</view>
							</u-radio-group>
						</scroll-view>
					</view>
				</view>
				<view class="pay_container">
					<button @click="stepHandle(1)" :disabled="btnDisabled" class="pay_btn">下一步</button>
				</view>
			</view>
		</u-popup>

		<!-- 订单确认弹框 -->
		<!-- <u-modal :show="detailFlag" width="500rpx" :round="20" @close="close(4)" :closeOnClickOverlay="true"
			:showCancelButton="true" @confirm="formSubmit()" @cancel="detailFlag = false" @touchmove.stop.prevent="stopPenetrate">
			<view class="detail_popup">
				<view class="detail_item">
					<view class="item_label">委托方：</view>
					<view class="item_content">{{formData.client}}</view>
				</view>
				<view class="detail_item">
					<view class="item_label">型号：</view>
					<view class="item_content">{{formData.model}}</view>
				</view>
				<view class="detail_item">
					<view class="item_label">品牌：</view>
					<view class="item_content">{{formData.brandName}}</view>
				</view>
				<view class="detail_item">
					<view class="item_label">供应商：</view>
					<view class="item_content">{{formData.supplier}}</view>
				</view>
				<view class="detail_item">
					<view class="item_label">批次：</view>
					<view class="item_content">{{formData.batch}}</view>
				</view>
				<view class="detail_item">
					<view class="item_label">产地：</view>
					<view class="item_content">{{formData.production}}</view>
				</view>
				<view class="detail_item">
					<view class="item_label">送检数量：</view>
					<view class="item_content">{{formData.sCount}}</view>
				</view>
				<view class="detail_item">
					<view class="item_label">检测报告：</view>
					<view class="item_content">{{formData.sCount}}</view>
				</view>
				<view class="detail_item">
					<view class="item_label">是否加急：</view>
					<view class="item_content">{{formData.sCount}}</view>
				</view>
				<view class="detail_item">
					<view class="item_label">备注：</view>
					<view class="item_content">{{formData.remark}}</view>
				</view>
				<view class="detail_item">
					<view class="item_label">寄件方式：</view>
					<view class="item_content">{{formData.remark}}</view>
				</view>
				<view class="detail_project">
					<view class="item_label">检测项目</view>
					<view class="pro_content">
						<view class="item_pro" v-for="(item,index) in obj.commodityJson" :key="index">{{item.Name}}：{{item.Price}}元</view>
					</view>
				</view>
			</view>
		</u-modal> -->
	</view>
</template>

<script>
	import Coupon from "../discountSelect/discountSelect.vue"
	import {
		mapMutations
	} from 'vuex'
	import {
		GetCommodityList,
		GetReportCE,
		CreateOrder,
		GetUserByOpenid,
		GetUserInfo,
		GetOrderToken,
		GetCalendar,
		GetReservation
	} from '../../../api/user.js'
	import {
		producerSearch,
		brandSearch
	} from '../../../api/search.js'
	import {
		Find,
		Check
	} from '../../../api/balance.js'
	import {
		getDefaultAddress,
		getAddressInfo
	} from '@/api/address.js'
	import debounce from '@/utils/debounce.js'; //防抖函数
	import {
		getFutureDate,
	} from "../../../utils/dayjs.js"
	export default {
		components: {
			Coupon
		},
		data() {
			return {
				formData: {
					brandName: '',
					model: '',
					batch: '',
					supplier: '',
					client: '',
					production: '',
					purchaseOrderNo: '',
					sCount: '',
					remark: '',
					state: '',
					commodityId: [], //检测项目id
					jsonData: [],
					reportDto: [],
					regularAddress: {
						address: "",
						name: "",
						phone: ""
					}, //回寄地址
					addressType: null, //寄件方式
					waybillNo: "", //运单号
					expressCompany: "",
					total: 0,
					couponsIds: [], //优惠券id列表
					urgent: 0, //默认不加急
				},
				showArrive: false, //到店检测弹框
				showSelf: false, //自行邮寄弹框
				show: false, //通知弹框
				show1: false, //通知弹框
				reportType: [], //报告类型 
				urgentType: [],
				//寄件方式
				mailType: [{
						name: '自行邮寄',
						text: "需自行填写快递单进行发货",
						id: 1
					},
					{
						name: '到店检测(寄回)',
						text: "需自行前往检测公司，检测完成后会寄回到您的回寄地址",
						id: 2
					},
					{
						name: '到店检测(自提)',
						text: "需自行前往检测公司，检测完成后需要您自行取货",
						id: 4
					}
				],
				//报告
				reportTypeValue: null,
				couponIds: [],
				urgent: false,
				step: 1, //第几步
				checkList: [], //检测项目
				itemPrice: 0, //检测项目总价
				appointmentStatus: null, //开启预约，1开启，0关闭
				role: {}, //身份
				reload: false,
				couponType: -1, //优惠券类型
				discounts: 0, //优惠券抵扣金额
				freePrice: 0, //优惠券免费外观金额
				checkedIds: [], //优惠券id
				couponFlag: false, //优惠券弹框
				couponList: [], //优惠券列表
				isUrgentFlag: false, //是否不选择时间，直接支付
				btnDisabled: false, //下单按钮禁用
				reserveTimeFlag: false, //选择预约时间弹框
				currentDateIndex: 0, //当前选择的日期索引
				detailFlag: false, //订单详情弹框
				deliveryTime: "",
				// 当前时间及未来六天时间
				reserveTimeList: [{
						value: getFutureDate(0),
						state: 0,
						status: 0, //选中状态
					},
					{
						value: getFutureDate(1),
						state: 0,
						status: 0
					},
					{
						value: getFutureDate(2),
						state: 0,
						status: 0
					},
					{
						value: getFutureDate(3),
						state: 0,
						status: 0
					},
					{
						value: getFutureDate(4),
						state: 0,
						status: 0
					},
					{
						value: getFutureDate(5),
						state: 0,
						status: 0
					},
					{
						value: getFutureDate(6),
						state: 0,
						status: 0
					},
				],
				timePeriodList: [],
				timePeriod: "",
				deliveryTime: "",
				reservedTime: [],
				reservationTime: 0,
				reservationID: -1,
				reportPrice: 0, //检测报告价格初始化为0
				readValue: null, //协议勾选
				numTo: 4, //月结身份跳转倒计时
				timerTo: null,
				disabledTo: false,
			}
		},
		onLoad() {
			//获取报告费用
			this.getReportCE()
			//默认地址
			this.getDefaultAddress()
			//检测项目
			this.getList()
			//用户信息
			this.getUserInfo()
			//用户身份
			this.getUserByOpenid()
		},
		onShow() {
			this.getCouponList({
				pageIndex: 1,
				pageSize: 999,
			})
			this.reserveTimeList.forEach(item => {
				this.getHoliday(item)
			})
			this.getOrderToken()
		},
		methods: {
			// 获取用户信息
			getUserInfo() {
				GetUserInfo().then((res) => {
					this.formData.client = res.wxName
					this.appointmentStatus = res.appointmentStatus
					if (this.appointmentStatus == 0) {
						this.isUrgentFlag = true
					}
				})
			},

			// 获取用户身份
			getUserByOpenid() {
				GetUserByOpenid().then((res) => {
					this.role = res
				})
			},

			//获取报告费用
			async getReportCE() {
				const res = await GetReportCE()
				if (res) {
					this.reportType = res.splice(1)
					this.urgentType = res.splice(0, 1)
				}
			},

			//数量正则
			numberType(val) {
				let temp = val.replace(/[^0-9]+/g, '')
				this.$nextTick(() => {
					this.formData.sCount = temp
				})
			},

			//是否加急单选框
			urgentChange() {
				//如果勾选加急，直接支付，没有勾选就选择预约时间
				if (this.urgent && this.appointmentStatus == 1) {
					this.isUrgentFlag = true
					this.reservationID = 0
					this.reservationTime = 0
					this.formData.urgent = 1
				} else {
					if (this.appointmentStatus == 1) {
						this.isUrgentFlag = false
						this.formData.urgent = 0
					} else {
						this.isUrgentFlag = true
						this.reservationID = 0
						this.reservationTime = 0
						this.formData.urgent = 1
					}
				}
				if (this.urgent) {
					this.formData.total = Number(this.itemPrice + this.reportPrice + this.urgentType[0].price).toFixed(2)
				} else {
					this.formData.total = (this.itemPrice + this.reportPrice).toFixed(2)
				}
				if (this.discounts) { //如果选择了优惠券，需要把优惠价格减去
					this.formData.total = (this.formData.total - this.discounts).toFixed(2)
				}
				if (this.freePrice) {
					this.formData.total = (this.formData.total - this.discounts - this.freePrice).toFixed(2)
				}
			},

			//检测报告复选框
			checkboxChange(e) {
				let arr = this.reportType.filter((item) => {
					return e.includes(item.id)
				})
				this.formData.reportDto = arr.map((item) => {
					return {
						id: item.id,
						name: item.name,
						price: item.price,
					}
				})
				this.reportPrice = 0;
				arr.forEach(item => {
					this.reportPrice += Number(item.price)
				})
				if (this.urgent) { //选择加急，需要把加急的价格加上
					this.formData.total = (this.itemPrice + this.reportPrice + this.urgentType[0].price).toFixed(2)
				} else {
					this.formData.total = (this.itemPrice + this.reportPrice).toFixed(2)
				}
				if (this.discounts) { //如果选择了优惠券，需要把优惠价格减去
					this.formData.total = (this.formData.total - this.discounts).toFixed(2)
				}
				if (this.freePrice) {
					this.formData.total = (this.formData.total - this.discounts - this.freePrice).toFixed(2)
				}
				this.reportTypeValue = arr.map(item => {
					return item.id
				})
			},

			// 打开弹出层
			openClick(i) {
				if (i == 1) {
					//到店检测
					this.showArrive = true
					if (!this.formData.regularAddress.address) {
						this.getDefaultAddress()
					}
				} else if (i == 0) {
					//自行邮寄(寄回)
					this.showSelf = true
					if (!this.formData.regularAddress.address) {
						this.getDefaultAddress()
					}
				} else if (i == 2) { //自行邮寄(自提)
					this.formData.regularAddress = {
						address: "",
						name: "",
						phone: ""
					}
					this.formData.addressType = 4
				} else if (i == 8) {
					this.show = true
				} else {
					this.show1 = true
				}
			},

			// 获取默认地址
			async getDefaultAddress() {
				const res = await getDefaultAddress()
				if (res) {
					this.formData.regularAddress.address = res.province + res.city + res.disCoun.split(",")[0] + res
						.detaAddress
					this.formData.regularAddress.name = res.conPer
					this.formData.regularAddress.phone = res.phoneNumber
				}
			},

			// 更换地址
			selectAddress() {
				// 跳转到地址页面
				uni.navigateTo({
					url: `/pagesA/pages/address/address?type=addInvoice`
				})
			},

			//地址传递
			prevDateFun(object) {
				let _this = this
				if (object) {
					_this.getAddressInfo(object.addressId)
				} else {
					return
				}
			},

			// 根据id获取地址信息
			async getAddressInfo(val) {
				let list = {
					id: Number(val)
				}
				const res = await getAddressInfo(list)
				if (res) {
					this.formData.regularAddress.address = res.province + res.city + res.disCoun.split(",")[0] + res
						.detaAddress
					this.formData.regularAddress.name = res.conPer
					this.formData.regularAddress.phone = res.phoneNumber
				}
			},

			//一键复制地址
			copybtn() {
				uni.setClipboardData({
					data: "鹏城测试ATP Lab 广东省深圳市福田区振华路163号飞亚达大厦102-C室 15914178852", //要被复制的内容
					success: () => { //复制成功的回调函数
						uni.showToast({ //提示
							title: '复制成功'
						})
					}
				});
			},

			// 关闭弹出层
			close(i) {
				if (i) {
					if (i == 1 || i == 2) {
						this.formData.addressType = i
						if (this.formData.regularAddress.address == "") {
							this.$refs.uToast.show({
								message: '回寄地址未填写',
								duration: "1000"
							})
						}
					}
					if (i == 3) {
						this.reserveTimeFlag = false
					}
				}
				this.show = false
				this.show1 = false
				this.showArrive = false
				this.showSelf = false
				this.detailFlag = false
			},

			//第几步操作
			stepHandle(val) {
				if (val == 1) {
					if (!this.isUrgentFlag) {
						if (this.reservationID == -1) {
							return this.$refs.uToastReserveTime.show({
								message: '请选择送货时间段',
								duration: "1000"
							})
						}
						this.formData.reservationID = this.reservationID
						this.formData.reservationTime = this.reservationTime
					} else {
						this.formData.urgent = 1
					}
					this.step = 2
					this.reserveTimeFlag = false
					uni.pageScrollTo({
						scrollTop: 0,
						duration: 0
					});
				} else {
					this.step = 1
				}
			},

			// 获取检测项目
			async getList() {
				const res = await GetCommodityList({
					type: 0
				})
				if (res) {
					this.checkList = res
					this.checkList.forEach(item => {
						item.total = 0
						item.active = []
					})
				}
			},

			//勾选项目
			changeCheck(item) {
				if (item.active.length > 0) {
					item.amount = 0
				} else {
					// X-RAY 5片起，其他的1片起
					// if (item.id == 5) {
					// 	item.amount = 5
					// } else {
					// 	item.amount = 1
					// }
					item.amount = 1
				}
				item.total = Number(item.amount * item.price).toFixed(2)
				this.reload = true
				this.couponType = -1
				this.discounts = 0
				this.freePrice = 0
				this.getTotalPrice()
				this.$forceUpdate();
			},

			//数量减
			decreaseNum(item) {
				console.log("item", item);
				// if (item.id == 5) { //X-RAY最低5片
				// 	if (item.amount <= 5) {
				// 		return this.$refs.uToast.show({
				// 			message: "最低5片起",
				// 		})
				// 	}
				// }
				if (item.amount > 0) {
					item.amount--
					item.total = (Number(item.amount) * Number(item.price)).toFixed(2)
					this.getTotalPrice()
				}
				if (item.amount == 0) {
					item.active = []
				}
				this.reload = true
				this.couponType = -1
				this.discounts = 0
				this.freePrice = 0
				this.$forceUpdate();
			},

			//检测项目数量输入
			checkInput(item, index) {
				// if (item.id == 5) { //X-RAY最少5片
				// 	if (item.amount <= 5) {
				// 		console.log("进来了",item.amount);
				// 		item.amount = 5
				// 	}
				// }
				if (!Number(item.amount)) {
					item.amount = 1
				}
				if (Number(item.amount) <= 0) {
					item.amount = 1
				}
				item.total = Number(item.amount) * Number(item.price)
				this.getTotalPrice()
				this.reload = true
				this.couponType = -1
				this.discounts = 0
				this.freePrice = 0
				this.$forceUpdate();
			},

			//数量加
			addNum(item) {
				item.amount++;
				item.total = Number(item.amount) * Number(item.price)
				this.getTotalPrice()
				this.reload = true
				this.couponType = -1
				this.discounts = 0
				this.freePrice = 0
				this.$forceUpdate();
			},

			// 计算总价
			getTotalPrice() {
				this.itemPrice = 0
				this.checkList.forEach(item => {
					this.itemPrice += Number(item.total)
				})
				if (this.urgent) { //选择加急，需要把加急的价格加上
					this.formData.total = Number(this.itemPrice + this.reportPrice + this
						.urgentType[0].price).toFixed(2)
				} else {
					this.formData.total = Number(this.itemPrice + this.reportPrice).toFixed(2)
				}
			},

			//优惠券列表
			async getCouponList(data) {
				const res = await Find(data)
				this.couponList = res.items
			},

			// 优惠券弹框
			toDiscount() {
				let checkIds = this.checkList.map(item => {
					if (item.amount > 0) {
						return item.id
					}
				})
				this.checkedIds = checkIds
				if (this.checkedIds.length == 0) {
					e.active = false
					return this.$refs.uToast.show({
						message: "请选择检测项目",
					})
				}
				this.couponFlag = true;
				this.getCouponList({
					pageIndex: 1,
					pageSize: 999,
				})
				this.getTotalPrice()
			},

			//选择优惠券
			changeCoupon(val) {
				this.getTotalPrice()
				console.log("优惠券", val);
				this.reload = val.reload
				this.couponType = val.couponType
				this.discounts = val.discounts
				this.couponFlag = false
				this.formData.couponsIds = val.couponsIds ? val.couponsIds : []
				if (val.discounts) {
					this.formData.total = (Number(this.formData.total) - Number(val.discounts)).toFixed(2)
				}
				if (val.freeIds.length) {
					for (let i = 0; i < val.freeIds.length; i++) {
						for (let j = 0; j < this.checkList.length; j++) {
							if (val.freeIds[i] == this.checkList[j].id) {
								this.freePrice = this.checkList[j].amount * this.checkList[j].price
								this.formData.total = (Number(this.formData.total) - Number(this.checkList[j]
									.amount * this
									.checkList[j]
									.price)).toFixed(2)
							}
						}
					}
				}
				this.couponFlag = false
			},

			//选择时间或进行下一步
			nextStep() {
				if (this.formData.client == "") {
					return this.$refs.uToast.show({
						message: '委托方不能为空',
						duration: "1000"
					})
				}
				if (!this.formData.model.trim()) {
					return this.$refs.uToast.show({
						message: '型号不能为空',
						duration: "1000"
					})
				}
				if (!this.formData.sCount.trim()) {
					return this.$refs.uToast.show({
						message: '送检数量不能为空',
						duration: "1000"
					})
				}
				if (this.formData.sCount == 0) {
					return this.$refs.uToast.show({
						message: '送检数量不能为0',
						duration: "1000"
					})
				}
				if (!this.formData.addressType) {
					return this.$refs.uToast.show({
						message: '请选择寄件方式',
						duration: "1000"
					})
				}
				if (this.formData.regularAddress.address == "" && this.formData.addressType != 4) {
					return this.$refs.uToast.show({
						message: '请填写回寄地址',
						duration: "1000"
					})
				}
				if (this.role.id == 1 || this.role.id == 2) {
					if (this.formData.purchaseOrderNo == "") {
						return this.$refs.uToast.show({
							message: '采购单号不能为空',
							duration: "1000"
						})
					}
				}
				if (this.readValue != 1) {
					return this.$refs.uToast.show({
						message: '请先勾选服务协议',
						duration: "1000"
					})
				}
				//检测项目
				this.getList()
				if (this.urgent) {
					this.step = 2
					uni.pageScrollTo({
						scrollTop: 0,
						duration: 0
					});
					this.formData.reservationID = this.reservationID
					this.formData.reservationTime = this.reservationTime
				} else {
					this.reserveTimeFlag = true
					if (this.reserveTimeList[this.currentDateIndex].state == 0) {
						this.reserveTimeList[this.currentDateIndex].status = 1
						this.deliveryTime = this.reserveTimeList[this.currentDateIndex].value
						this.reservationTime = this.reserveTimeList[this.currentDateIndex].value.split("-").join("")
						this.getReservation()
					} else {
						for (let i = 0; i < this.reserveTimeList.length; i++) {
							if (this.reserveTimeList[i].state == 0) {
								this.currentDateIndex = i
								this.reserveTimeList[this.currentDateIndex].status = 1
								this.deliveryTime = this.reserveTimeList[this.currentDateIndex].value
								this.reservationTime = this.reserveTimeList[this.currentDateIndex].value.split("-").join("")
								this.getReservation()
								return
							}
						}
					}
				}
			},

			//点击日期获取时间段
			selectDate(val, index) {
				this.currentDateIndex = index
				if (val.state != 1) {
					this.reserveTimeList.forEach(item => {
						item.status = 0
					})
					this.reservationID = -1
					val.status = 1
					this.deliveryTime = val.value
					this.reservationTime = val.value.split("-").join("")
					this.getReservation()
				}
			},

			//预约时间状态转换成中文
			getStateValue(val) {
				switch (val) {
					case 1:
						return "已被预定"
					case 2:
						return "已过期"
				}
			},

			//选择时间
			timeHandle(id) {
				this.reservationID = id
			},

			//根据日期获取预约时间段
			async getReservation() {
				const res = await GetReservation({
					time: this.deliveryTime
				})
				if (res && res.length > 0) {
					this.timePeriodList = res
				} else {
					uni.showToast({
						title: "接口异常",
						icon: 'error'
					})
					this.timePeriodList = []
				}
			},

			//判断日期是工作日/非工作日
			async getHoliday(item) {
				const res = await GetCalendar({
					time: item.value
				})
				if (res == 0 || res == 1 || res == 2 || res == 3) {
					if (res == 2) { //节假日禁选  （0正常上班  1周末双休  2节假日  3调休）
						item.state = 1
						item.status = 1
					} else {
						item.state = 0
						item.status = 0
					}
				} else {
					uni.showToast({
						title: "接口异常",
						icon: 'error'
					})
					this.reserveTimeList = []
				}
			},

			//弹框滑动页面穿透问题
			stopPenetrate() {
				return
			},

			//提交
			confirm() {
				let arr = this.checkList.filter(item => {
					return item.amount > 0
				})
				let arr1 = arr.map((item) => {
					return {
						name: item.name,
						price: item.price,
						amount: item.amount,
						profit: item.profit
					}
				})
				this.formData.jsonData = arr1
				this.formData.commodityId = arr.map((item) => {
					return item.id
				})
				if (this.formData.commodityId.length < 1) {
					return this.$refs.uToast.show({
						message: '请选择检测项目',
						duration: "1000"
					})
				}
				// 是否月结
				if (this.role.state) {
					this.formData.state = 9
				} else {
					this.formData.state = 2
				}
				this.formData.brandName = this.formData.brandName.trim()
				this.formData.batch = this.formData.batch.trim()
				this.formData.client = this.formData.client.trim()
				this.formData.model = this.formData.model.trim()
				this.formData.production = this.formData.production.trim()
				this.formData.purchaseOrderNo = this.formData.purchaseOrderNo.trim()
				this.formData.supplier = this.formData.supplier.trim()
				if (this.isUrgentFlag) { //选择加急，就把加急添加到reportDto里
					let urgentList = this.urgentType.map(item => {
						return {
							id: item.id,
							name: item.name,
							price: item.price,
						}
					})
					this.formData.reportDto.push(urgentList[0])
				} else {
					this.formData.reportDto = this.formData.reportDto.filter(item => item.id != 10)
				}
				console.log("this.formData", this.formData);
				this.subscribe()
			},

			// 调起通知
			subscribe() {
				const _that = this
				uni.getSetting({
					withSubscriptions: true,
					success: (res) => {
						if (!res.subscriptionsSetting.mainSwitch) {
							uni.showModal({
								title: '提示',
								content: '为了及时获取订单状态，您是否想接收订单状态的消息提醒？',
								success: function(res) {
									if (res.confirm) {
										// 订阅消息的总开关,如果是关着的，引导用户去打开
										_that.openMessage()
									} else if (res.cancel) {
										//创建订单
										_that.createOrder();
									}
								}
							});
						} else {
							// 如果开着，则继续向下打开弹窗，获取用户授权
							_that.message()
						}
					},
					fail() {
						// 如果失败，也打开弹窗，获取用户授权
						_that.message()
					}
				})
			},

			// 调用通知
			message() {
				const _that = this
				uni.requestSubscribeMessage({
					//此处填写刚才申请模板的模板ID
					tmplIds: ['HDW7cwWuKtvWeppBNzrnQiejfi3j18buPzd6lF4CoGs',
						'Xy1xuuzGcV0R5P8Pv8xq7EPb8gHTZAiFwH9OqIM18l0'
					],
					success(res) {
						console.log("调用通知");
						//创建订单
						_that.createOrder();
					},
					fail(res) {
						console.log("调用失败", res);
					}
				})
			},

			// 引导用户开启订阅
			openMessage() {
				const _that = this
				uni.openSetting({
					withSubscriptions: true,
					complete: (res) => {
						//创建订单
						_that.createOrder();
					}
				})
			},

			//创建订单
			createOrder() {
				this.btnDisabled = true
				uni.showLoading({
					title: '加载中',
				});
				CreateOrder(this.formData).then((res) => {
						if (res.code && res.code != 200) {
							uni.showToast({
								title: res.message,
								icon: 'error'
							})
						} else {
							// 订单号
							this.orderNo = res.orderNo
							if (this.formData.state == 9) {
								this.sendTimerTo()
							} else {
								// 跳转待支付详情页
								uni.redirectTo({
									url: `/pagesA/pages/payOrderNew/payOrderNew?i=${this.orderNo}`
								})
							}
						}
						// 上传成功清空表单数据 启用支付按钮
						this.btnDisabled = false
						uni.hideLoading();
					})
					.catch((res) => {
						// 启用支付按钮
						this.btnDisabled = false
						uni.hideLoading();
						uni.showToast({
							title: '请求出错了~',
							icon: 'error'
						})
						//打开创建订单权限
						this.getOrderToken()
					})
			},

			//获取订单token
			async getOrderToken() {
				const res = await GetOrderToken()
			},

			//月结倒计时
			sendTimerTo() {
				this.numTo = 3
				this.disabledTo = true
				this.loadingTo(); //启动定时器
				this.timerTo = setInterval(() => {
					//创建定时器
					if (this.numTo === 1) {
						this.clearTimerTo(); //关闭定时器
					} else {
						this.loadingTo();
					}
				}, 1000);
			},

			loadingTo() {
				//启动定时器
				this.numTo--; //定时器减1
			},

			clearTimerTo() {
				//清除定时器
				clearInterval(this.timerTo);
				this.timerTo = null;
				this.numTo = 0
				this.disabledTo = false
				uni.navigateTo({
					url: '/pagesB/pages/order/order?i=3'
				})
			},

		}
	}
</script>

<style lang="scss" scoped>
	.wrapper {
		width: 100%;
		padding: 20rpx 22rpx;
		padding-bottom: 0;
		box-sizing: border-box;
		position: relative;

		.step1 {
			width: 100%;
			padding: 24rpx;
			box-sizing: border-box;
			border-radius: 8rpx;
			box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.25);
			background: #fff;

			.title {
				color: rgb(61, 61, 61);
				font-family: 思源黑体;
				font-size: 36rpx;
				font-weight: bold;
			}

			.test_form {
				.form_item {
					display: flex;
					justify-content: space-between;
					align-items: center;
					border-bottom: 1px solid #D5D5D5;
					padding: 20rpx 0 20rpx 10rpx;
					box-sizing: border-box;

					.label {
						min-width: 150rpx;
						font-family: 思源黑体;
						font-size: 28rpx;
						display: flex;
						align-items: center;
					}

					.content {
						color: rgb(61, 61, 61);
						font-size: 24rpx;

						/deep/ .u-input {
							padding-right: 16rpx !important;
							box-sizing: border-box !important;
						}
					}


				}

				.mailType {
					margin-top: 20rpx;

					.box {
						display: flex;
						justify-content: space-between;
						align-items: center;
						background-color: #ecebeb;
						margin: 10rpx 0;
						padding: 20rpx 50rpx;
						border-radius: 10rpx;
					}
				}

				.bottom_item {
					display: flex;
					justify-content: center;
				}
			}
		}

		.step2 {
			width: 100%;
			padding: 0 30rpx;
			box-sizing: border-box;

			.title {
				height: 45rpx;
				display: flex;
				align-items: center;
				color: rgb(61, 61, 61);
				font-family: 思源黑体;

				.line {
					width: 2px;
					height: 100%;
					background-color: #3e56ba;
					margin-right: 10rpx;
				}
			}

			.project_container {
				width: 100%;
				margin-top: 22rpx;

				.pro_item {
					border: 1px dashed #14abc7;
					background: #d7f0db;
					background-image: url('http://applet.atptest.com/ePOUGtzg1724037166940.png?v=1724037167151');
					background-size: cover;
					background-position: center;
					padding: 28rpx;
					box-sizing: border-box;
					display: flex;
					align-items: center;
					margin-bottom: 40rpx;
					box-shadow: 0 0 5px #f0f0f0;

					.item_detail {
						flex: 1;
						margin-left: 20rpx;

						.item_label {
							width: 100%;
							display: flex;
							justify-content: space-between;
							align-items: center;
							font-size: 30rpx;

							.item_name {
								width: 70%;
								font-weight: bold;
								color: #14aac9;
							}

							.item_amount {
								display: flex;
								justify-content: flex-end;
								margin-left: 10rpx;

								button {
									display: flex;
									justify-content: center;
									align-items: center;
									margin: 0;
									padding-bottom: 4rpx;
									box-sizing: border-box;
									background: transparent;
								}

								button::after {
									border: none;
								}

								.decrease {
									width: 60rpx;
									height: 48rpx;
									line-height: 48rpx;
									text-align: center;
								}

								.amount {
									width: 74rpx;
									height: 48rpx;
									line-height: 48rpx;
									text-align: center;
									background: rgb(241, 241, 241);
									margin: 0 20rpx;
									overflow: hidden;
								}

								.add {
									width: 60rpx;
									height: 48rpx;
									line-height: 48rpx;
									text-align: center;
								}
							}
						}

						.item_price {
							font-size: 30rpx;
							color: #e54d42;
							color: #f37b1d;
							font-weight: bold;
						}

						.item_content {
							margin-top: 10rpx;
							font-size: 26rpx;
							font-weight: bold;
						}

						.item_tip {
							color: #ba0505;
							font-size: 26rpx;
							margin-top: 6rpx;
							font-weight: bold;
						}
					}
				}
			}
		}

		.step_btn {
			position: fixed;
			left: 0;
			bottom: 0;
			width: 100%;
			padding: 20rpx 40rpx 40rpx 40rpx;
			box-sizing: border-box;
			display: flex;
			justify-content: center;
			align-items: center;
			z-index: 99;
			background-color: #fff;
			border-top-left-radius: 10rpx;
			border-top-right-radius: 10rpx;
			border-top: 1px solid #f1f1f1;

			.step2_box {
				width: 100%;

				.coupon_container {
					max-width: fit-content;
					display: flex;
					justify-content: flex-start;
					align-items: center;
					margin: 20rpx 0rpx 40rpx 0;
					box-sizing: border-box;
				}
			}
		}

		.coupon_pop {
			height: 800rpx;
			position: relative;
		}

		.popup {
			padding: 30rpx;
			background-color: #f4f4f4;
			border-top-left-radius: 60rpx;
			border-top-right-radius: 60rpx;

			.addressBox {
				margin-top: 10px;
				border-radius: 10px;
				background-color: #fff;

				.card {
					display: flex;
					font-size: 24rpx;
					margin-top: 10px;
					padding: 10px;

					.top {
						background-color: #000;
						color: #fff;
						border-radius: 50%;
						width: 25px;
						height: 25px;
						text-align: center;
						line-height: 25px;
					}

					.address {
						width: 65%;
						margin: 0 10px;

						.name {
							font-size: 30rpx;
							font-weight: 700
						}

						.phone {
							padding-left: 10rpx;
							color: #787878
						}

						.addressR {
							color: #787878;
							margin-top: 10rpx
						}
					}

					.bottom {
						flex: 1;
						display: flex;
						justify-content: center;
						align-items: center;

						text {
							width: 100%;
							text-align: center;
							border-left: 2px solid #E9E9E9;
						}
					}
				}

				.ticket_container {
					width: 100%;
					height: 160rpx;
					box-sizing: border-box;
					padding: 0 26rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-around;
					margin-top: 20rpx;

					.form_item {
						display: flex;
						justify-content: space-between;
						align-items: center;

						.label {
							color: rgb(61, 61, 61);
							font-family: 思源黑体;
							font-size: 28rpx;
							font-weight: 400;
						}

						.item_input {
							width: 80%;

							.form_select {
								color: rgb(167, 167, 167);
								font-family: 思源黑体;
								font-size: 24rpx;
								font-weight: 400;
								text-align: right;
							}
						}
					}
				}
			}
		}

		.time_popup {

			.time_label {
				height: 142rpx;
				padding-left: 32rpx;
				box-sizing: border-box;
				color: rgb(30, 30, 30);
				font-family: 思源黑体;
				font-size: 36rpx;
				font-weight: 500;
				display: flex;
				flex-direction: column;
				justify-content: center;

				.time_tip {
					color: rgb(201, 0, 0);
					font-family: 思源黑体;
					font-size: 24rpx;
					font-weight: 500;
					margin-top: 12rpx;
				}
			}


			.period_container {
				height: 746rpx;
				border-top: 1px solid rgb(235, 237, 236);
				border-bottom: 1px solid rgb(235, 237, 236);
				display: flex;

				.period_left {
					width: 204rpx;
					height: 746rpx;
					border-right: 1px solid rgb(235, 237, 236);
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.time_period {
						width: 100%;
						height: 746rpx;
					}

					.left_item {
						height: 107rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						color: rgb(63, 63, 63);
						font-family: 思源黑体;
						font-size: 36rpx;
						font-weight: 400;
					}
				}

				.period_right {
					flex: 1;

					.time_period {
						width: 100%;
						height: 746rpx;

						.period_item {
							display: flex;
							align-items: center;
							border-bottom: 1px solid rgb(235, 237, 236);
							padding-left: 40rpx;
							box-sizing: border-box;
						}

						.period_item_label {
							width: 100%;
							display: flex;
							align-items: center;
							justify-content: space-between;
							height: 106rpx;
							padding-right: 32rpx;
							box-sizing: border-box;
							color: rgb(51, 51, 51);
							font-family: 思源黑体;
							font-size: 36rpx;
							font-weight: 400;
						}
					}
				}
			}

			.pay_container {
				width: 100%;
				z-index: 99;

				.pay_btn {
					width: 95%;
					color: #fff;
					background-color: #3953b8;
					margin: 20rpx auto 0 auto;
				}
			}
		}

		.detail_popup {
			width: 100%;
			min-height: 300rpx;

			.detail_item {
				display: flex;
				justify-content: space-between;
				margin: 10rpx 0;
			}

			.detail_project {
				width: 100%;
				padding: 20rpx;
				box-sizing: border-box;

				.item_label {
					font-size: 28rpx;
				}

				.pro_content {
					display: flex;
					align-items: center;
					flex-wrap: wrap;

					.item_pro {
						padding: 8rpx 20rpx;
						box-sizing: border-box;
						color: #fff;
						font-size: 24rpx;
						margin: 10rpx;
						margin-left: 0;
						border-radius: 30rpx;
						background: rgb(62, 86, 186);
					}
				}
			}
		}
	}
</style>